import React from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';

import _ from 'lodash';
import qs from 'qs';
import moment from 'moment';

import { addTab, timeLimit } from '@/utils/utils';
import { Form } from '@ant-design/compatible';
import { FormComponentProps } from '@ant-design/compatible/es/form';
import PageHeader from '@/components/PageHeader';

import {
  Card,
  Row,
  Col,
  Input,
  Select,
  DatePicker,
  Button,
  Radio,
  Table,
  Divider,
  Tooltip,
  Menu,
  Modal,
  message,
} from 'antd';

import CancelOrderView from './components/CancelOrderView';
import '@ant-design/compatible/assets/index.css';

const { RangePicker } = DatePicker;
const { Option } = Select;
const { pathname } = window.location;

interface TableProps extends FormComponentProps {
  dispatch: Dispatch;
  location: { query: any };
  tookManagementList: any;
  screen: string;
  INITINFO: any;
  loading: boolean;
}

interface TableState {
  sendType: string;
  orderStatus: string;
  formValues: any;
  current: number;
  pageSize: number;
  orderId: number;
  expressId: number;
  logisId: number;
  cancelVisbile: boolean;
  printModal: boolean;
  rowId: number;
  tplId: number;
  branchCode: number;
  addrId: number;
}

@connect(({
  tookManagementList,
  common: { INITINFO },
  global: { screen },
  loading,
}: any) => ({
  tookManagementList,
  INITINFO,
  screen,
  loading: loading.effects['tookManagementList/fetch'],
}))

class TookManagementElem extends React.Component<TableProps, TableState> {
  columns: any = [
    {
      title: '快递公司',
      dataIndex: 'expressName',
      width: 100,
      render: (text: any) => (
        <Tooltip title={text}>
          <div className="wordOmit">
            {text}
          </div>
        </Tooltip>
      ),
    },
    {
      title: '运单号',
      dataIndex: 'expCode',
      width: 150,
      render: (text: any) => (
        <Tooltip title={text}>
          <div className="wordOmit">
            {text || '--'}
          </div>
        </Tooltip>
      ),
    },
    {
      title: '寄件人/手机号',
      dataIndex: 'senderName',
      width: 200,
      render: (text: any, record: any) => (
        <Tooltip title={`${text}/${record.senderPhone}`}>
          <div className="wordOmit">
            <span>{text}/{record.senderPhone}</span>
          </div>
        </Tooltip>
      ),
    },
    {
      title: '应付金额(元)',
      dataIndex: 'shouldFee',
      width: 120,
      render: (text: string) => (
        <span>{text}</span>
      ),
    },
    {
      title: '实付金额(元)',
      dataIndex: 'realFee',
      width: 120,
      render: (text: string) => (
        <span>{text}</span>
      ),
    },
    {
      title: '订单状态',
      dataIndex: 'statusName',
      width: 100,
    },
    {
      title: '付款方式',
      dataIndex: 'paySideDesc',
      width: 100,
      render: (text: string) => text || '--',
    },
    {
      title: '寄件方式',
      dataIndex: 'typeName',
      width: 100,
      render: (text: string) => text || '--',
    },
    {
      title: '操作人/手机号',
      dataIndex: 'operName',
      width: 200,
      render: (text: any, record: any) => (
        <Tooltip title={`${text}/${record.operPhone}`}>
          <div className="wordOmit">
            <span>{text}/{record.operPhone}</span>
          </div>
        </Tooltip>
      ),
    },
    {
      title: '重量',
      dataIndex: 'weight',
      width: 80,
      render: (text: string) => `${text}kg` || '--',
    },
    {
      title: '操作',
      fixed: 'right',
      width: 210,
      dataIndex: 'id',
      render: (id: any, record: any) => (
        <>
          <span
            className="operLink"
            onClick={() => this.handleSeeDetail(record)}
          >
            查看
          </span>
          <Divider type="vertical" />
          <span
            className={![5, 6, 10, 11, 21, 26, 27].includes(record.status) ? 'operLink' : 'operLinkDisabled'}
            onClick={() => this.handleChangeCancelModal(true, id)}
          >
            取消订单
          </span>
          {
            [5, 9, 24].includes(record.status) && (
              <>
                <Divider type="vertical" />
                <span
                  className="operLink"
                  onClick={() => this.showPrintModal(id, record.expressId, record.logisId)}
                >
                  打印面单
                </span>
              </>
            )
          }
        </>
      ),
    },
  ]

  state: TableState = {
    sendType: '0',
    orderStatus: '0',
    formValues: {},
    current: 1,
    pageSize: 20,
    orderId: 0,
    expressId: 0,
    logisId: 0,
    cancelVisbile: false,
    printModal: false,
    rowId: 0,
    tplId: 0,
    branchCode: 0,
    addrId: 0,
  }

  static getDerivedStateFromProps(props: any, state: any) {
    const { search } = props.location;
    const query = qs.parse(search, { ignoreQueryPrefix: true });
    const {
      pageIndex,
      pageSize,
      status,
      type = '0',
      ...formValues
    } = query;

    return {
      ...state,
      formValues,
      sendType: type,
      orderStatus: status,
      current: Number(pageIndex) || 1,
      pageSize: Number(pageSize) || (props.screen === 'sm' ? 100 : 20),
    };
  }

  componentDidMount() {
    const { tookManagementList: { dataInfo } } = this.props;
    if (dataInfo?.list?.length) return;

    this.fetchExpressList();
    this.fetchLogisList();
    this.fetchCancelList();
    this.fetchSendingCount();
    this.fetchSendingTypes();
    this.setFieldsValue();
    this.fetchDataListInfo();
  }

  componentDidUpdate(prevProps: any, prevState: any) {
    const {
      formValues,
      current,
      pageSize,
      sendType,
      orderStatus,
    } = this.state;

    if (!_.isEqual(formValues, prevState.formValues)
      || current !== prevState.current
      || pageSize !== prevState.pageSize
      || sendType !== prevState.sendType
      || orderStatus !== prevState.orderStatus) {
      this.setFieldsValue();
      this.fetchDataListInfo();
      this.fetchSendingCount();
    }

    const { tplId, branchCode } = this.state;
    const {
      tookManagementList: {
        cainiaoShippAddr,
        printConfInfo,
        templateList,
      },
    } = this.props;

    if ((!_.isEqual(printConfInfo, prevProps.tookManagementList.printConfInfo) || tplId === 0)
      && templateList.length
    ) {
      this.setTemplateId();
    }

    if ((!_.isEqual(cainiaoShippAddr, prevProps.tookManagementList.cainiaoShippAddr)
      || branchCode === 0
      // || addrId === 0
    )
      && cainiaoShippAddr.all_list
    ) {
      this.setAddressInfo();
    }
  }

  setTemplateId = () => {
    const { tookManagementList: { printConfInfo, templateList } } = this.props;
    if (templateList.length) {
      const tplId = templateList
        .find((tpl: any) => tpl.name === printConfInfo.tpl_name).common_tpl_id;
      this.setState({ tplId });
    }
  }

  setAddressInfo = () => {
    const { tookManagementList: { cainiaoShippAddr } } = this.props;

    const { default_info, all_list } = cainiaoShippAddr;

    const addInfoList = all_list
      .find((addr: any) => addr.branch_code === default_info.branch_code).addr_info_list;

    addInfoList.forEach((addr: any, index: number) => {
      addr.id = index + 1;
    });

    const {
      addr_info: {
        province,
        city,
        district,
        detail,
      },
    } = default_info;

    const addrInfo = addInfoList
      .find((addr: any) => addr.province === province
        && addr.city === city
        && addr.district === district
        && addr.detail === detail);

    this.setState({ branchCode: default_info.branch_code, addrId: addrInfo?.id });
  }

  // 设置表单值
  setFieldsValue = () => {
    const {
      formValues: { startTime, endTime, ...values },
    } = this.state;

    if (startTime) {
      values.startEndTime = [moment(startTime), endTime ? moment(endTime) : moment(new Date())];
    } else {
      values.startEndTime = [moment(moment().subtract(7, 'days').format('YYYY/MM/DD')), moment(new Date())];
    }

    const { form: { setFieldsValue } } = this.props;
    setFieldsValue(values);
  }

  /** 获取信息统计 */
  fetchSendingCount = (type?: number) => {
    const { pageIndex, pageSize, ...query } = this.getQueryParams();
    if (type) query.type = type;

    const { dispatch } = this.props;
    dispatch({
      type: 'tookManagementList/sendingCount',
      payload: query,
    });
  }

  /** 获取寄件类型 */
  fetchSendingTypes = () => {
    const { pageIndex, pageSize, ...query } = this.getQueryParams();

    const { dispatch } = this.props;
    dispatch({
      type: 'tookManagementList/sendingTypes',
      payload: query,
    });
  }

  // 获取数据
  fetchDataListInfo = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'tookManagementList/fetch',
      payload: this.getQueryParams(),
    });
  }

  // 获取查询参数
  getQueryParams = () => {
    const {
      formValues,
      current: pageIndex,
      pageSize,
      sendType,
      orderStatus,
    } = this.state;

    const params: any = {
      ...formValues,
      type: sendType === '0' ? '' : sendType,
      status: orderStatus === '0' ? '' : orderStatus,
      pageIndex,
      pageSize,
    };

    if (params.startTime === undefined) {
      params.startTime = moment().subtract(7, 'days').format('YYYY-MM-DD 00:00:00');
    }

    return params;
  };

  /**
   * 获取快递公司列表
   */
  fetchExpressList = () => {
    const { dispatch } = this.props;
    dispatch({ type: 'common/fetchExpressList' });
  }

  /**
   * 获取物流中心列表
   */
  fetchLogisList = () => {
    const { dispatch } = this.props;
    dispatch({ type: 'common/fetchLogisList' });
  }

  /**
   * 获取取消原因
   */
  fetchCancelList = () => {
    const { dispatch } = this.props;
    dispatch({ type: 'tookManagementList/fetchCancelList' });
  }

  handleSeeDetail = (record: any) => {
    const { dispatch } = this.props;
    addTab(dispatch, {
      name: `揽件管理-${record.expCode}`,
      url: `/tookDeposit/tookManagement/list/detail?orderId=${record.id}`,
      isTopMenu: true,
    });
  }

  /** 打印出库单 */
  handlePrintOutboundOrder = (record: any) => {
    const { dispatch } = this.props;
    addTab(dispatch, {
      name: '打印出库交接单',
      url: '/tookDeposit/tookManagement/list/receipt',
      isTopMenu: true,
    });
  }

  /** 下载门店寄件二维码 */
  handleDownloadQrCode = () => {
    const { dispatch } = this.props;
    addTab(dispatch, {
      name: '下载二维码',
      url: '/tookDeposit/tookManagement/list/qrCcode',
    });
  }

  /** 设置 */
  handleSetUp = (record: any) => {
    const { dispatch } = this.props;
    addTab(dispatch, {
      name: '设置',
      url: '/tookDeposit/tookManagement/list/setting',
      isTopMenu: true,
    });
  }

  /** 切换顶部订单状态 */
  handleChangeRadio = (e: any) => {
    const { target: { value } } = e;
    this.handleSearch(null, { type: value, status: 0 });
  }

  /** 切换订单状态 */
  handleChangeMenus = (e: any) => {
    const { selectedKeys = [] } = e;
    this.handleSearch(null, { status: selectedKeys[0] });
  }

  handleSearch = (e: any, searchParams = {}) => {
    if (e) {
      e.preventDefault();
    }

    const { sendType, orderStatus, pageSize } = this.state;

    const { form: { validateFields } } = this.props;

    validateFields((errors, values) => {
      if (!errors) {
        const { startEndTime = [], ...params } = values;
        const query = {
          pageIndex: 1,
          pageSize,
          type: sendType,
          status: orderStatus,
          ...params,
          ...searchParams,
        };

        query.startTime = startEndTime[0]
          ? moment(startEndTime[0]).format('YYYY-MM-DD HH:mm:ss')
          : moment().subtract(7, 'days').format('YYYY-MM-DD 00:00:00');

        query.endTime = startEndTime[1]
          && moment(startEndTime[1]).format('YYYY-MM-DD HH:mm:ss');

        const { dispatch } = this.props;
        addTab(dispatch, {
          name: '揽件管理-国内件',
          url: `${pathname}?${qs.stringify(query)}`,
          isTopMenu: true,
        });
      }
    });
  }

  handleReset = () => {
    const { form: { resetFields } } = this.props;
    this.setState({
      sendType: '0',
      orderStatus: '0',
    });

    resetFields();

    const { dispatch } = this.props;
    addTab(dispatch, {
      name: '揽件管理-国内件',
      url: pathname,
      isTopMenu: true,
    });
  }

  /** 翻页 */
  onSelectChange = (current: number, pageSize: number) => {
    const { formValues, sendType, orderStatus } = this.state;
    const query = {
      ...formValues,
      pageIndex: current,
      pageSize,
      type: sendType,
      status: orderStatus,
    };

    const { dispatch } = this.props;
    addTab(dispatch, {
      name: '揽件管理-国内件',
      url: `${pathname}?${qs.stringify(query)}`,
      isTopMenu: true,
    });
  }


  /** 订单信息导出 */
  handleInforExcel = () => {
    const { tookManagementList: { countInfo } } = this.props;
    if (!countInfo.sent) return;

    const { pageIndex, pageSize, ...query } = this.getQueryParams();

    const { dispatch } = this.props;
    dispatch({
      type: 'tookManagementList/inforExcal',
      payload: query,
    });
  }

  handleChangeCancelModal = (cancelVisbile: boolean, orderId: number = 0) => {
    this.setState({ cancelVisbile, orderId });
  }

  showPrintModal = (orderId: number, expressId: number, logisId: number) => {
    this.setState({
      printModal: true,
      orderId,
      expressId,
      logisId,
    }, () => {
      this.fetchPrintConfInfo();
      this.fetchCainiaoShippAddr();
      this.fetchTemplateList();
    });
  }

  hidePrintModal = () => {
    this.setState({
      printModal: false,
      orderId: 0,
      expressId: 0,
      logisId: 0,
    });
  }

  fetchCainiaoShippAddr = () => {
    const { logisId, expressId } = this.state;
    const { dispatch } = this.props;
    dispatch({
      type: 'tookManagementList/cainiaoShippAddr',
      payload: { logisId, expressId },
    });
  }

  fetchPrintConfInfo = () => {
    const { orderId } = this.state;
    const { dispatch } = this.props;
    dispatch({
      type: 'tookManagementList/printConfInfo',
      payload: { orderId },
    });
  }

  fetchTemplateList = () => {
    const { expressId } = this.state;
    const { dispatch } = this.props;
    dispatch({
      type: 'tookManagementList/printTemplate',
      payload: { expressId },
    });
  }

  changeTemplate = (commonTplId: number) => {
    const { logisId, expressId } = this.state;
    const { dispatch } = this.props;
    dispatch({
      type: 'tookManagementList/setPrintTemplate',
      payload: { expressId, logisId, commonTplId },
    });

    this.setState({ tplId: commonTplId });
  }

  changeBranch = (branchCode: any) => {
    this.setState({ branchCode, addrId: 0 });
  }

  changeAddress = (addrId: number) => {
    this.setState({ addrId });
  }

  handlePrint = () => {
    const {
      orderId,
      tplId,
      branchCode,
      addrId,
    } = this.state;

    if (!tplId) {
      message.error('请选择打印机模板');
      return;
    }

    if (!branchCode) {
      message.error('请选择网点名称');
      return;
    }

    if (!addrId) {
      message.error('请选择发货地');
      return;
    }

    const {
      tookManagementList: {
        cainiaoShippAddr,
        printConfInfo,
      },
    } = this.props;

    const branch = cainiaoShippAddr?.all_list
      .find((shippAddr: any) => shippAddr.branch_code === branchCode);

    const addressInfo = branch.addr_info_list.find((addr: any) => addr.id === addrId);

    const params = {
      orderId,
      boxId: printConfInfo.box_id,
      tplNum: printConfInfo.tpl_num,
      addrOrderId: branch.addr_order_id || 0,
      branchCode: branch.branch_code,
      branchName: branch.branch_name,
      province: addressInfo.province,
      city: addressInfo.city,
      district: addressInfo.district,
      detail: addressInfo.detail,
    };

    const { dispatch } = this.props;
    dispatch({
      type: 'tookManagementList/yunPrint',
      payload: params,
    }).then(({ code, body }: any) => {
      if (code === 0) {
        this.hidePrintModal();
      } else {
        let msg = body;
        const index = body.indexOf('{');
        if (index !== -1) {
          const content = JSON.parse(body.substring(body.indexOf('{')));
          msg = content.message;
        }
        message.error(msg);
      }
    });
  }

  onClickRow = ({ id }: any) => ({
    onClick: () => {
      this.setState({ rowId: id });
    },
  })

  setRowClassName = ({ id }: any) => {
    const { rowId } = this.state;
    return id === rowId ? 'clickRowStyl' : '';
  }

  renderSearchFormElem() {
    const {
      form: { getFieldDecorator },
      INITINFO: { expressList, logisList },
    } = this.props;

    const dates = [
      moment(moment().subtract(7, 'days').format('YYYY/MM/DD')),
      moment(new Date(), 'YYYY-MM-DD'),
    ];

    return (
      <Form className="tableListForm" onSubmit={this.handleSearch}>
        <Row gutter={12}>
          <Col md={12} sm={24}>
            <Form.Item label="创建时间" colon={false}>
              {getFieldDecorator('startEndTime', {
                initialValue: dates,
              })(
                <RangePicker
                  placeholder={['开始时间', '截止时间']}
                  style={{ width: '100%' }}
                  disabledDate={timeLimit}
                  ranges={{
                    今天: [moment().startOf('day'), moment().endOf('day')],
                    本周: [moment().startOf('week'), moment().endOf('week')],
                    本月: [moment().startOf('month'), moment().endOf('month')],
                    上月: [
                      moment(moment().subtract({ day: new Date().getDate() - 1, month: 1 })),
                      moment(moment().subtract({ day: new Date().getDate(), month: 0 })),
                    ],
                  }}
                />,
              )}
            </Form.Item>
          </Col>

          <Col md={6} sm={24}>
            <Form.Item label="物流中心" colon={false}>
              {getFieldDecorator('logisId')(
                <Select
                  showSearch
                  allowClear
                  placeholder="请选择"
                  filterOption={(input: any, option: any) => (
                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  )}
                >
                  {logisList.map((item: any) => (
                    <Option value={String(item.id)} key={item.id}>{item.name}</Option>
                  ))}
                </Select>,
              )}
            </Form.Item>
          </Col>
          <Col md={6} sm={24}>
            <Form.Item label="快递公司" colon={false}>
              {getFieldDecorator('expressId')(
                <Select
                  showSearch
                  allowClear
                  placeholder="请选择"
                  filterOption={(input: any, option: any) => (
                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  )}
                >
                  {expressList.map((item: any) => (
                    <Option value={String(item.id)} key={item.id}>{item.name}</Option>
                  ))}
                </Select>,
              )}
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={12}>
          <Col md={6} sm={24}>
            <Form.Item label="　运单号" colon={false}>
              {getFieldDecorator('expCode')(
                <Input allowClear placeholder="请输入" />,
              )}
            </Form.Item>
          </Col>
          <Col md={6} sm={24}>
            <Form.Item label="寄件手机" colon={false}>
              {getFieldDecorator('phone')(
                <Input allowClear type="number" placeholder="请输入" />,
              )}
            </Form.Item>
          </Col>
          <Col md={6} sm={24}>
            <Form.Item label="付款方式" colon={false}>
              {getFieldDecorator('paySide')(
                <Select allowClear placeholder="请选择">
                  <Option value="1">寄付</Option>
                  <Option value="2">到付</Option>
                </Select>,
              )}
            </Form.Item>
          </Col>
          <Col md={6} sm={24}>
            <div className="flexFeView">
              <Button
                type="primary"
                htmlType="submit"
                className="smallButton"
              >
                查询
              </Button>
              <Button
                type="primary"
                className="addButton smallButton marginL16"
                onClick={this.handleReset}
              >
                重置
              </Button>
            </div>
          </Col>
        </Row>
      </Form>
    );
  }

  renderPrintModalElem = () => {
    const {
      printModal,
      tplId,
      branchCode,
      addrId,
    } = this.state;
    const {
      tookManagementList: {
        cainiaoShippAddr,
        printConfInfo,
        templateList,
      },
    } = this.props;

    const { all_list = [] } = cainiaoShippAddr;

    const addrInfoList = all_list
      .find((addr: any) => addr.branch_code === branchCode)?.addr_info_list || [];

    addrInfoList.forEach((addInfo: any, index: number) => {
      addInfo.id = index + 1;
    });

    return (
      <Modal
        title="打印面单（云打印）"
        destroyOnClose
        visible={printModal}
        onCancel={this.hidePrintModal}
        footer={[
          <div key="ok" style={{ textAlign: 'center' }}>
            <Button
              type="primary"
              style={{ width: 100 }}
              onClick={this.handlePrint}
            >
              打印
            </Button>
          </div>,
        ]}
      >
        <Form className="tableListForm" hideRequiredMark>
          <Row gutter={12}>
            <Form.Item label="云盒编码　" style={{ width: '100%' }}>
              {printConfInfo.box_code}
            </Form.Item>
            <Form.Item label="打印机模板" style={{ width: '100%' }}>
              <Select
                placeholder="请选择"
                value={tplId || undefined}
                onChange={this.changeTemplate}
              >
                {
                  templateList.map((template: any) => (
                    <Option
                      key={template.common_tpl_id}
                      value={template.common_tpl_id}
                    >
                      {template.name}
                    </Option>
                  ))
                }
              </Select>
            </Form.Item>
            <Form.Item label="网点名称　" style={{ width: '100%' }}>
              <Select
                placeholder="请选择"
                value={branchCode || undefined}
                onChange={this.changeBranch}
              >
                {
                  all_list.map((address: any) => (
                    <Option
                      key={address.branch_code}
                      value={address.branch_code}
                    >
                      {address.branch_name}
                    </Option>
                  ))
                }
              </Select>
            </Form.Item>
            <Form.Item label="发货地　　" style={{ width: '100%' }}>
              <Select
                placeholder="请选择"
                value={addrId || undefined}
                onChange={this.changeAddress}
              >
                {
                  addrInfoList.map((addr: any) => (
                    <Option
                      key={addr.id}
                      value={addr.id}
                    >
                      {addr.province + addr.city + addr.district + addr.detail}
                    </Option>
                  ))
                }
              </Select>
            </Form.Item>
            <Form.Item label="模板尺寸　" style={{ width: '100%' }}>
              {printConfInfo.tpl_size}
            </Form.Item>
          </Row>
        </Form>
      </Modal>
    );
  }

  render() {
    const {
      sendType,
      current,
      pageSize,
      orderId,
      orderStatus,
      cancelVisbile,
    } = this.state;

    const {
      tookManagementList: { dataInfo, countInfo },
      screen,
      loading,
    } = this.props;

    const pagination: any = dataInfo
      ? {
        total: dataInfo ? dataInfo.count : 0,
        pageSize,
        current: current || 1,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50', '100'],
        showTotal: () => `共${dataInfo.count || 0}条数据`,
        onChange: this.onSelectChange,
        onShowSizeChange: this.onSelectChange,
      }
      : {};

    const countArr = Object.values(countInfo);
    const totalInfo = countArr.length ? countArr.reduce((prev: any, next: any) => prev + next) : 0;

    if (screen === 'sm' || screen === 'lg') {
      delete this.columns[this.columns.length - 1].fixed;
    } else if (screen === 'md') {
      this.columns[this.columns.length - 1].fixed = 'right';
    }

    return (
      <>
        <PageHeader />
        <Card bordered={false} bodyStyle={{ padding: '0 24px' }}>
          <div className="tableBtns">
            <Radio.Group
              buttonStyle="solid"
              value={sendType}
              size="middle"
              onChange={this.handleChangeRadio}
            >
              <Radio.Button value="0">全部</Radio.Button>
              <Radio.Button value="7">上门取件</Radio.Button>
              <Radio.Button value="8">门店寄件</Radio.Button>
              <Radio.Button value="10">柜体寄件</Radio.Button>
            </Radio.Group>
            <Menu
              onSelect={this.handleChangeMenus}
              selectedKeys={[orderStatus]}
              mode="horizontal"
            >
              <Menu.Item key="0">全部{totalInfo}</Menu.Item>
              {
                sendType !== '8' && sendType !== '10' && (
                  <Menu.Item key="1">待接单{countInfo.init || 0}</Menu.Item>
                )
              }
              <Menu.Item key="2">待揽收{countInfo.recept || 0}</Menu.Item>
              <Menu.Item key="24">待支付{countInfo.waitPaid || 0}</Menu.Item>
              <Menu.Item key="9">已支付{countInfo.paid || 0}</Menu.Item>
              <Menu.Item key="5">已出库{countInfo.sent || 0}</Menu.Item>
              <Menu.Item key="6">已取消{countInfo.canceled || 0}</Menu.Item>

              {
                sendType !== '7' && sendType !== '8' && (
                  <Menu.Item key="26">待取回{countInfo.willRetrieval || 0}</Menu.Item>
                )
              }

              {
                sendType !== '7' && sendType !== '8' && (
                  <Menu.Item key="27">已取回{countInfo.retrieval || 0}</Menu.Item>
                )
              }
            </Menu>
          </div>
        </Card>

        <Card bordered={false} className="searchForm">
          {this.renderSearchFormElem()}
        </Card>

        <Card bordered={false} className="tableList">
          <div className="tableBtns">
            <Button
              type="primary"
              size="small"
              className="marginR16"
              onClick={this.handlePrintOutboundOrder}
            >
              打印出库单
            </Button>
            <Button
              type="primary"
              size="small"
              className="marginR16"
              onClick={this.handleSetUp}
            >
              设置
            </Button>
            <Button
              type="primary"
              size="small"
              className="marginR16"
              onClick={this.handleDownloadQrCode}
            >
              下载门店寄件二维码
            </Button>
            <Tooltip
              placement="topLeft"
              title={orderStatus === '5' ? `导出订单：${countInfo.sent || 0}条` : '只能导出已出库订单，请在已出库下进行导出'}
            >
              <Button
                disabled={!countInfo.sent || orderStatus !== '5'}
                type="primary"
                size="small"
                className="marginR16"
                onClick={this.handleInforExcel}
              >
                订单信息导出
              </Button>
            </Tooltip>
          </div>

          <Table
            rowKey="id"
            tableLayout="fixed"
            className="statementTable tableHeight60"
            columns={this.columns}
            dataSource={dataInfo.list || []}
            pagination={pagination}
            loading={loading}
            scroll={{ x: 1500 }}
            onRow={this.onClickRow}
            rowClassName={this.setRowClassName}
          />
        </Card>

        <CancelOrderView
          cancelVisbile={cancelVisbile}
          orderId={orderId}
          search={this.getQueryParams()}
          changeCancelModal={this.handleChangeCancelModal.bind(this)}
        />

        {this.renderPrintModalElem()}
      </>
    );
  }
}

export default Form.create<TableProps>()(TookManagementElem);
